<template>
  <div class="drawer__content">
    <!--      订单详情-->
    <div class="drawer__body">
      <div class="drawer__tab">
        <el-button id="id-business-components-offershare-inSide" icon="el-icon-caret-bottom"
                   :type="(shareType=='inSide')?'primary':''"
                   :disabled="offerInfo == null || !(offerInfo.isShared == 0 || ((offerInfo.originOfferId) && offerInfo.originOfferId != -1))"
                   :autofocus="shareType === 'inSide'" size="mini" style="width: 80px;" @click="shareType ='inSide'">
          内部
        </el-button>
        <el-button id="id-business-components-offershare-outSide" icon="el-icon-caret-top"
                   :type="(shareType=='outSide')?'primary':''"
                   v-if="offerInfo == null || !(offerInfo.originOfferId) || offerInfo.originOfferId == -1"
                   :disabled="offerInfo == null || !(offerInfo.isShared == 1)"
                   :autofocus="shareType === 'outSide'" size="mini" style="width: 80px" @click="shareType='outSide'">
          外部
        </el-button>
        <el-button id="id-business-components-offershare-advSide" icon="el-icon-caret-top"
                   :type="(shareType=='advSide')?'primary':''"
                   v-if="offerInfo != null && (offerInfo.originOfferId) && offerInfo.originOfferId != -1"
                   :disabled="offerInfo == null || !(offerInfo.isShared == 1)"
                   :autofocus="shareType === 'advSide'" size="mini" style="width: 80px" @click="shareType='advSide'">
          外部
        </el-button>
      </div>
      <el-row>
        <el-col :span="24">
          <cs-cell label="订单信息" :border="false">
            <div class="order-info">
              <div class="order-info-item">
                <span style="width: 45px">offer : </span>
                <el-select id="id-business-share-offerId" clearable filterable v-model="offerIds" size="mini">
                  <el-option v-for="(item,index) in offerList" :label="item.name" :key="index" :value="item.id">
                    <el-tooltip :disabled="item.name.length <= 8" class="item" effect="dark" :content="item.name" W
                                placement="right">
                      <span style="margin-left: 10px;color: #606266;font-size: 13px">{{ labelLength(item.name) }}</span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </div>
              <div class="order-info-item" v-if="shareType !== 'inSide'">
                <span style="width: 120px">{{ shareType === 'outSide' ? '合作伙伴' : '广告主' }} : </span>
                <el-input size="mini" disabled v-model="advName"></el-input>
              </div>

            </div>
          </cs-cell>
        </el-col>
      </el-row>

      <!--      /订单详情-->
      <!--    外部分享-->
      <div v-show="shareType === 'outSide'">
        <offer-share-outside :offer-id="offerIds" :open-check="openCheck"></offer-share-outside>
      </div>
      <!--    内部分享-->
      <div v-show="shareType === 'inSide'">
        <offer-share-inside :offer-id="offerIds" :open-check="openCheck"></offer-share-inside>
      </div>
      <!--    原广告主分享-->
      <div v-show="shareType === 'advSide'">
        <offer-share-adv :offer-id="offerIds" :offer-info="offerInfo" :open-check="openCheck"
                         :confirm-to-share="confirmToShare" @adv-name="getAdvName" ref="shareAdvRef"></offer-share-adv>
      </div>
    </div>
  </div>
</template>

<script>

import {getOfferList} from "@/api/business/share"
import offerShare from "./components/offerShare";
import offerShareOutside from "./components/offerShareOutside";
import offerShareInside from "./components/offerShareInside"
import offerShareAdv from "./components/offerShareAdv";
import CsCell from "@/components/CsCell/CsCell";

export default {
  name: 'shareRe',
  components: {
    offerShare, offerShareInside, offerShareOutside, offerShareAdv, CsCell
  },
  props: {
    offerId: {
      type: Number | String
    },
    confirmToShare: {
      type: Number
    },
  },
  data() {
    return {
      offerList: [],
      offerIds: this.offerId,
      offerInfo: null,
      openCheck: '',
      agentList: [{
        url: 'www.baidu.com',
        company: '北海九剑',
        platform: 'ios,android',
        iosCountry: '美国,日本',
        androidCountry: '越南,老挝',
        status: '1',
        permission: '1'
      }],//代理商列表
      outAccountList: [],//外部账户列表
      shareType: 'inSide',//分享类型
      advName: '' // 广告主名字
    }
  },
  mounted() {
    if (this.offerId) {
      this.openCheck = false;
    }
    getOfferList().then(res => {
      this.offerList = res.data.data
      this.offerInfo = this.getOfferInfo(this.offerId)
    })

  },
  watch: {
    // offerInfo: {
    //   deep: true,
    //   handler(val, old) {
    //     if (val == null || val === old) {
    //       return
    //     }
    //     let self = this;
    //     if (val.isShared == 0) {
    //       setTimeout(() => {
    //         self.shareType = 'inSide';
    //       }, 20);
    //     } else if (!(val.originOfferId) || val.originOfferId == -1) {
    //       if (self.shareType != 'outSide') {
    //         setTimeout(() => {
    //           self.shareType = 'outSide';
    //         }, 20);
    //       }
    //     } else {
    //       if (self.shareType == 'outSide') {
    //         setTimeout(() => {
    //           self.shareType = 'advSide';
    //         }, 20);
    //       }
    //     }
    //     self.shareType = 'inSide';
    //   }
    // },
  },
  methods: {
    getOfferInfo(offerId) {
      let self = this;
      if (self.offerList != null) {
        for (let i = 0; i < self.offerList.length; i++) {
          if (self.offerList[i].id == offerId) {
            return self.offerList[i];
          }
        }
      }
      return null;
    },
    //显示label长度
    labelLength(val) {
      if (val.length > 8) {
        return val.substr(0, 8) + '...'
      } else {
        return val
      }
    },
    getAdvName(e) {
      this.advName = e[0].advName
    }
  }
}
</script>
<style lang="scss">
.drawer__content {
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 90%;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;

  .drawer__body {
    height: 80%;
    width: 100%;
    .drawer__tab {
      width: 100%;
      text-align: center;
    }
  }

  .drawer__footer {

  }
}

::v-deep .el-radio-button__inner {
  padding: 7px 35px;
}
.order-info {
  font-size: 14px;
  display: flex;
  .order-info-item {
    display: flex;
    margin-right: 15px;
    align-items: center;
  }
}
</style>
